<template>
  <div class="rotate-container">
    <div class="rotate-txt"
         :style="`transform: rotate(${rotateDegree}deg)`">
      <span class="span1">北</span>
    </div>
    <div class="rotate-div">
      <button :title="`逆时针旋转${onceRotateDegree}°`"
              class="rotate-clockwise"
              @click.prevent="rotateClockwise"></button>
      <button title="恢复正北方向"
              class="rotate-north"
              :style="`transform: rotate(${rotateDegree}deg)`"
              @click.prevent="rotateNorth"></button>
      <button :title="`顺时针旋转${onceRotateDegree}°`"
              class="rotate-inverse-clockwise"
              @click.prevent="rotateInverseClockwise"></button>
    </div>
  </div>
</template>

<script>
import _ from "lodash";

export default {
  name: "map_rotate",
  data() {
    return {
      rotateDegree: 0,
      onceRotateDegree: 15,
      clickEventBus: null,
      threedChange: false
    };
  },
  computed: {
    map() {
      return this.$store.getters.map; //openlayers地图对象
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    rotateClockwise() {
      this.rotateDegree -= this.onceRotateDegree;
    },
    rotateNorth() {
      if (this.rotateDegree >= 0) {
        if (this.rotateDegree % 360 > 180)
          this.rotateDegree = Math.ceil(this.rotateDegree / 360) * 360;
        else this.rotateDegree = Math.floor(this.rotateDegree / 360) * 360;
      } else {
        if (this.rotateDegree % 360 > -180)
          this.rotateDegree = Math.ceil(this.rotateDegree / 360) * 360;
        else this.rotateDegree = Math.floor(this.rotateDegree / 360) * 360;
      }
    },
    rotateInverseClockwise() {
      this.rotateDegree += this.onceRotateDegree;
    }
  },
  watch: {
    rotateDegree(val) {
      console.log("rotate: ", val);
      if (this.threedChange) {
        this.threedChange = false;
        return;
      }
      let view = !!this.map && this.map.getView();
      if (view) {
        view.animate({
          duration: 600,
          rotation: ((val / 180) * Math.PI).toFixed(1)
        });

        // 为了解决前端绘制时图标 文字 边框 不随地图旋转问题
        // _.forEach(this.themeLayerList, themeLayer => {
        //   if (themeLayer.type == "vector" && themeLayer.visible) {
        //     themeLayer.layer &&
        //       themeLayer.layer.setStyle(themeLayer.layer.getStyle());
        //     themeLayer.zjLayer &&
        //       themeLayer.zjLayer.layer &&
        //       themeLayer.zjLayer.layer.setStyle(
        //         themeLayer.zjLayer.layer.getStyle()
        //       );
        //   }
        // });
      }
    }
  }
};
</script>

<style lang="scss">
$rotatePic: "../../../../assets/img/map/rotate.png";
@mixin rotate-direction {
  position: absolute;
  outline: none;
  border: none;
  background: url($rotatePic) -75px -5px / 266px no-repeat;
  cursor: pointer;
  top: 5px;
  z-index: 1;
  width: 15px;
  height: 42px;
  opacity: 1;
}

.rotate-container {
  position: absolute;
  bottom: 22%;
  right: 75px;
  z-index: 1;
  font-size: 16px;

  .rotate-div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 52px;
    height: 54px;
    transform: scale(0.8);
    background: url($rotatePic) 0% 0% / 266px no-repeat;
  }

  .rotate-txt {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 52px;
    height: 54px;
    font-size: 10px;
    color: #ffff;
    span {
      position: absolute;
      top: -15px;
      left: 20px;
    }
  }

  .rotate-clockwise {
    @include rotate-direction;
    left: 2px;

    &:hover {
      background: url($rotatePic) -89px -5px / 266px no-repeat;
    }
  }

  .rotate-inverse-clockwise {
    @include rotate-direction;
    right: 2px;
    transform: scaleX(-1);

    &:hover {
      background: url($rotatePic) -89px -5px / 266px no-repeat;
    }
  }

  .rotate-north {
    position: absolute;
    outline: none;
    border: none;
    background: url($rotatePic) -56px -4px / 266px no-repeat;
    cursor: pointer;
    left: 19px;
    top: 4px;
    width: 14px;
    height: 44px;
    opacity: 1;
    transition: transform 0.6s;
  }
}

@media screen and (max-width: 1366px) {
  .rotate-container {
    bottom: 125px;
  }
}
</style>
